<template>
  <!-- 一级分类 -->
  <nav>
    <li
      v-for="(item, index) in leftList"
      :key="item.type"
      :class="{ active: activeIndex == index }"
      @click="chooseType(item.type, index)"
    >
      {{ item.title }}
    </li>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      leftList: [
        { title: "烘焙", type: "bake" },
        { title: "甜品饮料", type: "drink" },
        { title: "肉类", type: "meat" },
        { title: "蔬菜", type: "vegetable" },
        { title: "水果", type: "fruit" },
        { title: "煲汤", type: "soup" },
        { title: "水产", type: "fish" },
        { title: "豆制品", type: "bean" },
        { title: "米面", type: "mainfood" },
        { title: "腌制食品", type: "pickle" },
        { title: "节日", type: "holiday" },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    chooseType(type, index) {
      // 点击切换一级分类
      this.activeIndex = index;
      // 传type值到vuex
      this.$store.commit("chooseType", type);
    },
  },
};
</script>

<style lang="scss" scoped>
nav {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(156, 153, 153, 0.125);
  li {
    width: 100%;
    height: 48px;
    font-size: 14px;
    line-height: 48px;
    text-align: center;
    position: relative;
  }
  .active {
    color: rgb(102, 110, 232);
    background-color: #fff;
  }
  .active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 48px;
    background-color: rgb(102, 110, 232);
  }
}
</style>
